<template>
  <div class="strategy">
  <el-select v-model="value" placeholder="请选择攻略地区"  @change="changeSelected">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.province_name"
      :value="item.province_name">
    </el-option>
  </el-select>
  <div class="pros">
  <div class="pro" v-for="(item,i) of pros.slice(n,n+9)" :key="i">
    <router-link :to="`/strategydetail/${item.id}`">
    <img :src="item.image" alt="">
    <p>{{item.title}}</p>
    <p>攻略作者：{{item.author}}</p>
    <p>发布时间：{{item.issue_date}}</p>
    </router-link>
  </div>
  </div>
  <el-pagination
    background
    layout="prev, pager, next"
    :total="pros.length/9*10"
    @current-change="changepage">
  </el-pagination>
  </div>
</template>
<script>
export default {
   data(){
      return {
        options: [],
        value: '',
        pros:[],
        prosc:[],
        n:0,
        select:[]
      }
    },
  methods:{
    changepage(i){
      this.n=(i-1)*9
    },
    changeSelected(){
      this.n=0;
      this.pros=this.prosc;
      this.select=[];
      let reg=new RegExp(this.value)
      this.pros.forEach(item=>{
        if(reg.test(item.title)){
          this.select.push(item);
        }
      })
      this.pros=this.select;
    }
    },
  mounted(){
      this.axios.get("province").then(result=>{
        this.options=result.data.results;
      })
      this.axios.get("strategy").then(result=>{
        result.data.results.forEach(item => {
          item.image=require(`../assets/house/${item.image}`);
        });
        this.pros=result.data.results;
        this.prosc=result.data.results;
      })
    }
}
</script>
<style>
  .strategy .el-select{
    padding: 2%;
    width: 300px;
    margin-left: 24.5% 
  }
  .strategy .pros{
    display: flex;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
  }
  .strategy .pro{
    width: 206px;
    padding: 50px; 
    transition: all 0.2s ease 
  }
  .strategy .pro:hover{
    transform: translateY(-15px);
    box-shadow: 0px 0px 25px black;  
  }
  .strategy .pro p{
    color: black;
  }  
  .strategy .pro p+p{
    color: #999;
    font-size: 16px;
  }
  .strategy .pro p:nth-child(2){
    margin-top: 5px; 
    margin-bottom: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
  } 
  .strategy .pro p:nth-child(3){
    margin-bottom: 5px; 
  }     
  .strategy .pro img{
    border-radius:8%; 
  }
  .strategy .el-pagination{
    width: 400px;
    margin: 0 auto;
  }
</style>

